<template>
    <div>
        <div class="login-container">
            <div style="width: 350px;" class="login-box">
                <div style="font-weight: bold; font-size: 24px; text-align:center; margin-bottom:30px">用户注册</div>
                <!-- ：model是校验的数据从哪来  ：rules是检验规则  名字必须一样-->
                <el-form :model="loginForm" :rules="loginRules" :ref="formRef">
                 <el-form-item prop="username">
                 <el-input prefix-icon="User" v-model="loginForm.username" placeholder="请输入账号"/>
                 </el-form-item>
                 <el-form-item prop="userPwd">
                 <el-input show-password prefix-icon="Lock" v-model="loginForm.userPwd" placeholder="请输入密码"/>
                 </el-form-item>
                 <el-form-item prop="userEmail">
                 <el-input  prefix-icon="Lock" v-model="loginForm.userEmail" placeholder="请输入绑定的邮箱"/>
                 </el-form-item>
                 <el-form-item>
                    <el-button type="primary" style="width:100% " @click="register">注册</el-button>
                 </el-form-item>
                </el-form>
                <div style="margin-top: 30px; text-align: right;">
                  <router-link to="/login"> 去登录> </router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive ,ref} from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance } from 'element-plus';
import { useRouter } from "vue-router";
import request from "../utils/request"
const router=useRouter()
//登录账号参数
const loginForm = ref({
      username: "",
      userPwd: "",
      userEmail:"",
      userRole:"USER"
})




const validateUsername = (rule: any, value: any, callback: any) => {
  if (value.length < 3) {
    callback(new Error('用户名长度不能小于3位'))
  } else {
    callback()
  }
}
// 校验规则
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value.length < 5) {
    callback(new Error('密码长度不能小于5位'))
  } else {
    callback()
  }
}
// 校验规则
const loginRules = {
  username: [{ required: true, validator: validateUsername }],
  userPwd: [{ required: true, trigger: 'blur', validator: validatePassword }]
}

const formRef = ref<FormInstance>()
const register=async ()=>{//注册函数
    // console.log('点击注册');
  await formRef.value?.validate()
  
    request.post(`user/register`,loginForm.value).then(res=>{
        router.push("/login")
        ElMessage.success("注册成功")
    })
}


</script>
<style scoped>
    .login-container{
        min-height: 100vh; 
        overflow: hidden;
        display: flex; 
        align-items: center; 
        justify-content: center;
        background-image:url("https://ssyx-suzus.oss-cn-hangzhou.aliyuncs.com/2024/03/26/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-01-29%20202054.png") ;
        background-size: cover;
    }
    .login-box{
        background-color: rgba(255,255,255,0.8);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        padding: 30px;
        border-radius:5px ;
        
    }
</style>